<template>
  <div class="summary">
    <div class="summary-left">
      <div class="summary-left-title">订单概要</div>
      <ul class="summary-left-list">
        <li
          :class="{ 'summary-left-list-active': item.isActive }"
          v-for="(item, index) in menuLeft"
          :key="'left_' + index"
          @click="handleMenuLeft(item)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="summary-content">
      <el-scrollbar ref="scrollbarRef">
        <component :is="currentActivePage" :detail="detail"></component>
      </el-scrollbar>
    </div>
    <div class="summary-right">
      <el-scrollbar>
        <div class="summary-right-total">
          <span class="total-tit">任务统计</span>
          <div class="total-list">
            <p>
              <span>任务总数</span>
              <span>{{ taskTotal.totalTask || 0 }}</span>
            </p>
            <p>
              <span>已完成</span>
              <span>{{ taskTotal.finishedTask || 0 }}</span>
            </p>
            <p>
              <span>进行中</span>
              <span>{{ taskTotal.runningTask || 0 }}</span>
            </p>
            <p>
              <span>未开始</span>
              <span>{{ taskTotal.notStartTask || 0 }}</span>
            </p>
            <p>
              <span>延期任务</span>
              <span>{{ taskTotal.delayedTask || 0 }}</span>
            </p>
            <p>
              <span>今日到期</span>
              <span>{{ taskTotal.deadlineTask || 0 }}</span>
            </p>
            <p>
              <span>完成率</span>
              <span class="complate-rate">{{ taskTotal.completionRate || 0 }}%</span>
            </p>
            <p>
              <span>延期率</span>
              <span class="delay-rate">{{ taskTotal.delayRate || 0 }}%</span>
            </p>
          </div>
        </div>
        <div class="summary-right-project">
          <div class="title">
            <span>人员信息</span>
          </div>
          <div class="project-list">
            <div class="project-list-item" v-for="(item, index) in personList" :key="index">
              <span>{{ item.taskName || "--" }}</span>
              <p>
                <img :src="urlResource + item.avatarUrl" />
                <span>{{ item.userName || "--" }}</span>
              </p>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
  <div v-if="drawerVisible">
    <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" @change="refresh" />
  </div>
</template>
<script lang="ts" setup>
import { inject, onMounted, ref, computed, onUnmounted } from "vue"; // computed
// import { Plus, Calendar, EditPen } from "@element-plus/icons-vue";
// import { useDict } from "@/hooks/useDict";
import Dialog from "@/components/DialogForm/index.vue";
import mittBus from "@/utils/mittBus";
// import UpDate from "../../components/UpDate/index.vue";
// import dayJs from "dayjs";
import OutLine from "./components/OutLine.vue";
// api
import { getOrderDetail, getOrderCountOrderStatus, getOrderRelatedPerson } from "@/api/modules/order";
/**
 *   addProjectUser,
  updateProjectUser,
  deleteProjectUser,
  addProjectProduct,
  deleteProjectProduct,
 *   updateProjectHardware,
  updateProjectSoftware,
  updateProjectPlanTime,
  updateProjectUserId
 */
// import { getListProductUnbound } from "@/api/modules/agv";
import { getListAllUser } from "@/api/modules/sys";
// import { ElMessage } from "element-plus";
// hook
// const { getDictItem, getDict } = useDict(["projectStatus", "projectTypeId", "taskStatus", "projectMember", "productId"]);
// import { useHandleData } from "@/hooks/useHandleData";
// // 变量
const urlResource = window?.staticConfig.urlResource;
const scrollbarRef = ref(null);
const orderId = inject("orderId");
const detail = ref<any>({});
// const refScrollbar = ref(null);
const listAllUser = ref<any>([]);
let drawerVisible = ref(false);
let taskTotal = ref<any>({});
// let agvList = ref<any>([]);
let config = ref<any>({
  width: 24
});
const menuLeft = ref([
  {
    label: "订单基本信息",
    value: 1,
    isActive: true
  }
]);

const personList = ref([]);

// computed
const currentActivePage = computed(() => {
  scrollbarRef?.value?.setScrollTop(0);
  const obj = menuLeft.value.find((item: any) => item.isActive);
  switch (obj.value) {
    case 1:
      return OutLine;
    case 2:
      return Custom;
    case 3:
      return Car;
    default:
      return "OutLine";
  }
});
// 方法
const handleMenuLeft = item => {
  menuLeft.value.forEach(itm => {
    itm.isActive = itm.value === item.value;
  });
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};
// const handleScroll = e => {
//   const wheelDelta = e.wheelDelta || -e.deltaY * 40;
//   const scrollbar = refScrollbar.value;
//   // scrollbar.wrap$获取到包裹容器的element对象
//   scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft - wheelDelta);
// };
const getOrderCountOrderStatusFn = async () => {
  try {
    const { data } = await getOrderCountOrderStatus({ orderId });
    taskTotal.value = data;
  } catch (error) {
    console.log(error);
  }
};

const getOrderRelatedPersonFn = async () => {
  const { data } = await getOrderRelatedPerson({ orderId });
  personList.value = data;
  // console.log(data);
};

// 获取项目详情
const getOrderDetailFn = async id => {
  const { data } = await getOrderDetail({ id });
  detail.value = data;
};

const refresh = () => {
  getOrderDetailFn(orderId);
};
onMounted(() => {
  getOrderDetailFn(orderId);
  getOrderCountOrderStatusFn();
  getOrderRelatedPersonFn();
  getListAllUserFn();

  // getListProductUnboundFn();
});

mittBus.on("ProjectRefresh", () => {
  refresh();
});
onUnmounted(() => {
  mittBus.off("ProjectRefresh");
});
</script>
<style lang="scss" scoped>
ul,
li,
p {
  padding: 0;
  margin: 0;
  list-style: none;
}
i {
  font-style: normal;
}
.el-select-dropdown__item {
  padding: 0 32px 0 20px;
}
.summary {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .summary-left {
    flex: 0 0 300px;
    overflow: hidden;
    background: #ffffff;
    &-title {
      padding: 25px 30px;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
    &-list {
      padding: 0 30px;
      li {
        height: 60px;
        margin-top: 20px;
        font-size: 16px;
        font-weight: 600;
        line-height: 60px;
        color: #333333;
        text-indent: 56px;
        cursor: pointer;
        background: $project-background;
        border-radius: 6px;
      }
      &-active {
        color: #ffffff !important;
        background: var(--el-color-primary) !important;
      }
    }
  }
  .summary-content {
    flex: 1;
    margin: 0 10px;
    &-detail {
      box-sizing: border-box;
      height: 258px;
      padding: 30px;
      background: #ffffff;
      .title {
        margin-bottom: 3px;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }
      .info {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        span {
          margin-right: 30px;
        }
      }
      .options {
        display: flex;
        margin-top: 34px;
        .li {
          display: flex;
          align-items: center;
          margin-right: 114px;
          .flag {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .titles {
            display: flex;
            flex-flow: column nowrap;
            i:first-child {
              font-size: 14px;
              font-weight: 400;
              color: #333333;
            }
            i:last-child {
              margin-top: 2px;
              font-size: 12px;
              font-weight: 400;
              color: #999999;
            }
          }
          .calendar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin-right: 10px;
            font-size: 16px;
            color: #999999;
            border: 1px dashed #cccccc;
            border-radius: 50%;
            svg {
              width: 16px;
              height: 16px;
            }
          }
        }
        .li:hover {
          color: $primary-color;
          .calendar {
            color: $primary-color;
            border: 1px dashed $primary-color;
          }
        }
      }
      .kh-info {
        display: flex;
        flex-flow: column nowrap;
        margin-top: 30px;
        span:first-child {
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
        }
        span:last-child {
          font-size: 16px;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    overflow: hidden;
    &-project {
      margin-top: 10px;
      background: #ffffff;
      .project-title {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        padding: 0 30px;
        span:first-child {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
        }
        span:last-child {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          cursor: pointer;
          i:first-child {
            width: 15px;
            height: 15px;
            margin-right: 10px;
            font-size: 15px;
            color: #666666;
          }
        }
      }
      .project-content {
        padding: 20px 30px 30px;
        .user-wrap {
          display: flex;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            border-radius: 50%;
          }
          span:last-child {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .project-content-wrap {
        padding: 0 30px 20px;
        .project-content-item {
          display: flex;
          flex-flow: column nowrap;
          .title {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          .fontWeight {
            font-size: 16px;
          }
          .content {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .empty-box {
        padding: 0 30px 20px;
        font-size: 14px;
        color: var(--el-text-color-secondary);
        text-align: center;
      }
    }
    &-milestone {
      padding: 30px;
      margin-top: 10px;
      background: #ffffff;
      .milestone-title {
        height: 72px;
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 600;
        line-height: 72px;
        color: #333333;
      }
      .milestone-content {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex: 1;
        justify-content: center;
        overflow: hidden;
        .milestone-list {
          position: relative;
          display: flex;
          width: max-content;

          // gap: 60px;
          .line-start {
            position: absolute;
            top: 34px;
            left: 0;
            z-index: 2;
            width: 20px;
            height: 20px;
            background: #ffffff;
            i {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 8px;
              height: 8px;
              margin-top: -4px;
              margin-left: -4px;
              border: 1px solid #7499f8;
              border-radius: 50%;
            }
          }
          .line-end {
            position: absolute;
            top: 34px;
            right: -30px;
            z-index: 2;
            width: 20px;
            height: 20px;
            background: #ffffff;
            i {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 8px;
              height: 8px;
              margin-top: -4px;
              margin-left: -4px;
              background: #c7cedb;
              border-radius: 50%;
            }
          }
          li {
            display: flex;
            flex: 0 0 auto;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            margin-right: 60px;
            span:first-child {
              box-sizing: border-box;
              height: 28px;
              padding: 0 22px;
              margin-bottom: 8px;
              font-size: 14px;
              font-weight: 400;
              line-height: 28px;
              color: #5378f6;
              text-align: center;
              border: 1px solid #5378f6;
              border-radius: 4px;
            }
            .line {
              position: relative;
              width: 100%;
              height: 2px;
              padding: 0 30px;
              margin: 8px 0;
              background: #ededed;
              i:first-child {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 20px;
                height: 20px;
                margin-top: -10px;
                margin-left: -10px;
                background: #ffffff;
              }
              i:last-child {
                position: absolute;
                top: 50%;
                left: 50%;
                box-sizing: border-box;
                width: 8px;
                height: 8px;
                margin-top: -4px;
                margin-left: -4px;
                border: 1px solid #7197f8;
                transform: rotate(45deg);
              }
            }
            span {
              font-size: 14px;
              font-weight: 400;
              color: #5378f6;
              text-align: center;
            }
            span:last-child {
              margin-top: 8px;
            }
          }
          li:nth-child(2) {
            margin-left: 30px;
          }
          .active {
            span:first-child {
              color: rgb(115 216 151);
              border: 1px solid rgb(115 216 151);
            }
            .line {
              i:last-child {
                background: rgb(115 216 151);
                border: 1px solid rgb(115 216 151);
              }
            }
            span {
              color: rgb(115 216 151);
            }
          }
        }
      }
    }
  }
  .summary-right {
    box-sizing: border-box;
    flex: 0 0 340px;
    overflow: hidden;
    background: #ffffff;
    .summary-right-project {
      padding: 30px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        span:first-child {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
        }
        p {
          display: flex;
          span {
            display: flex;
            align-items: center;
            cursor: pointer;
          }

          // span:first-child {
          //   margin-right: 20px;
          // }
          i {
            margin-left: 8px;
            font-weight: 400;
          }
        }
      }
      .status {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        span:first-child {
          margin-right: 20px;
        }
        span:last-child {
          padding: 2px 12px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;

          // background: #74d98c;
          border-radius: 16px;
        }
        .green {
          background: #74d98c;
        }
        .red {
          background: #e25e72;
        }
        .yellow {
          background: #f8d27c;
        }
      }
      .description {
        display: flex;
        flex-flow: column wrap;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        span:first-child {
          margin-bottom: 20px;
        }
        span:last-child {
          width: 100%;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          word-break: break-all;
          word-wrap: break-word;
        }
      }
      .project-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        color: #333333;
        &-item {
          display: flex;
          flex: 0 0 50%;
          flex-flow: column nowrap;
          margin-bottom: 20px;
          overflow: hidden;
          > span {
            margin-bottom: 10px;
            overflow: hidden;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p {
            display: flex;
            align-items: center;
            img {
              width: 32px;
              height: 32px;
              margin-right: 10px;
              border-radius: 50%;
            }
            span {
              font-size: 16px;
              font-weight: 400;
              color: inherit;
            }
          }
        }
      }
    }
    .summary-right-total {
      padding: 30px;

      // border-bottom: 1px solid #eeeeee;
      .total-tit {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }
      .total-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 8px;
        margin-top: 20px;
        p {
          display: flex;
          flex-flow: column nowrap;
          span:first-child {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          span:last-child {
            margin-top: 9px;
            font-size: 24px;
            font-weight: 400;
            color: #333333;
          }
          .complate-rate {
            color: #74d98c !important;
          }
          .delay-rate {
            color: #e25e72 !important;
          }
        }
      }
    }
  }
}
</style>
